<template>
    <div class="storeInfo">
        <!-- tab部分 -->
        <div class="tabContainer">
            <el-table :data="tableData" stripe style="width: 100%;text-align:center" 
            tooltip-effect="dark">
                <el-table-column prop="question_id" label="序号" fixed></el-table-column>
                <el-table-column prop="period_name" label="时段"></el-table-column>
                <el-table-column prop="" label="问题" width="400">
                    <template slot-scope="scope">
                        <div style="text-align:left" v-for='(item,i) in scope.row.options' :key="i">
                            <p>选项{{item.id}}:{{item.content}}</p>
                            <p>说明-{{scope.row.desc_contents[i]}}</p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="create_time" label="更新时间"></el-table-column>

                <el-table-column prop="" label="操作" width="200">
                    <template slot-scope="scope">
                        <span v-for="(item,indexLimit) in limitList" :key="indexLimit" class="lightFont" @click="theClick(item.url,scope.row)">
                            <i>{{item.name}}</i>
                            <i v-if="indexLimit != limitList.length-1">&nbsp;|&nbsp;</i>
                        </span>
                    </template>          
                        
                    
                </el-table-column>
                

            </el-table>
                        
        </div>
        <!-- 分页部分 -->
        <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            @current-change="changePage"
            :page-size="size"
            :current-page.sync="pageNum"
            :hide-on-single-page=true
            :total="total">{{total}}
        </el-pagination>
  

        <!-- 修改 -->
        <el-dialog :title="alerttips" :visible.sync="add_edit_show">
                
            <el-form>
                <el-form-item label="题干" :label-width="editW">
                    <el-input v-model="editForm.stem"></el-input>
                </el-form-item>
                <el-form-item label="题干描述" :label-width="editW">
                    <el-input v-model="editForm.desc_title"></el-input>
                </el-form-item>
                
                <div v-for="(item,i) in options" :key='i'>
                    <el-form-item :label="item.name1" :label-width="editW">
                        <el-input v-model="item.content"></el-input>
                    </el-form-item>
                    <el-form-item :label="item.name2" :label-width="editW">
                        <el-input v-model="item.desc"></el-input>
                    </el-form-item>
                </div>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="add_edit_show = false">取 消</el-button>
                <el-button type="primary" @click="addyes">确 定</el-button>
            </div>
        </el-dialog>
<!-- 特殊修改 -->


        <el-dialog :title="alerttips" :visible.sync="differ">
                
            <el-form>
                <el-form-item label="题干" :label-width="editW">
                    <el-input v-model="editForm.average_capacity" oninput="value=value.replace(/[^(\d+)(.\d+)?$]/g,'')"></el-input>
                </el-form-item>
                <el-form-item label="题干描述" :label-width="editW">
                    <el-input v-model="editForm.plus_capacity" oninput="value=value.replace(/[^(\d+)(.\d+)?$]/g,'')"></el-input>
                </el-form-item>
                <el-form-item label="男士人数上限" :label-width="editW">
                    <el-input v-model="editForm.reason"></el-input>
                </el-form-item>
                <el-form-item label="说明" :label-width="editW">
                    <el-input v-model="editForm.reason"></el-input>
                </el-form-item>
                <el-form-item label="女士人数上限" :label-width="editW">
                    <el-input v-model="editForm.reason"></el-input>
                </el-form-item>
                <el-form-item label="说明" :label-width="editW">
                    <el-input v-model="editForm.reason"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="differ = false">取 消</el-button>
                <el-button type="primary" @click="addyes">确 定</el-button>
            </div>
        </el-dialog>



    </div>
</template>

<script>
import { abc } from "../../../../js/abc.js";
import {potUrl} from '../../../../js/config_url.js';
import goodsListBox from '../../pop/goodslist.vue';
//import func from '../../../../../vue-temp/vue-editor-bridge';
//* ./vue-temp/vue-editor-bridge in-------vscode 自行在这里加入了一行代码致使报错
// var url= potUrl.rpriceList;
let goodurl = potUrl.itemSearch
export default {
    components:{
        goodsListBox:goodsListBox
    },
    data(){
        return {          
            tableData:[],
            total:50,
            size:20,
            input_url:goodurl,//搜素商品传递给子组件的搜索接口
            differ:false,//基准商品
            alerttips:'',
            form:{
                size:20,
                page:1
            },//搜索内容的参数
            add_edit_show:false,//编辑、添加弹框的显示开关            
            pageNum:1,//page
            limitList:[],//权限的存储数组
            editW:'120px',
            editForm:{
                stem:'',//题干
                desc_title:'',//题干描述
                
            },//编辑弹框内需要的数据
            options:[
                    {id:'A',content:'',name1:'选项A',name2:'选项A说明',desc:''},
                    {id:'B',content:'',name1:'选项B',name2:'选项B说明',desc:''},
                    {id:'C',content:'',name1:'选项C',name2:'选项C说明',desc:''}
                ],
            // timev:'',
            limitList_str:'',
            itemGoodsList:{unit_price:''},//搜索商品后返回的数据；obj;
            mark:'',//标记是添加还是编辑
        }
    },
    mounted(){
        var that = this;
        abc.get(that,potUrl.questionslist,that.form,function(res){
            that.total = res.data.list.length
            that.tableData =  res.data.list;
        });//列表 
    },
    created(){
        var that = this;       
        that.limitList = [
            {name:'修改',url:'edit'}

        ]     
    },
    methods:{   
        
        theClick(a,b){
            let that = this;
            if(a == 'edit'){        
                abc.get(that,potUrl.questionsdetail,{question_id:b.question_id},function(res){
                                    
                    that.editForm.stem = res.data.stem;//题干
                    that.editForm.desc_title = res.data.desc_title//题干描述
                    that.editForm.question_id = b.question_id;
                    if(res.data.options == null){
                        that.add_edit_show =true;
                    }
                    if(res.data.options.length == 0){
                        that.differ = true;
                    }else{
                        that.add_edit_show =true;
                        $.each(res.data.options,function(i,item){
                            that.options[i].content = item.content;
                            that.options[i].desc = res.data.desc_contents[i];
                        })
                    }
                    
                    that.alerttips = '修改'                   
                })
            }else if(a == 'del'){
                abc.twoTips(that,potUrl.ritemsdel,'是否要删除此条数据？',{id:b.id},function() {
                    that.$message({
                        type: 'success',
                        message: '操作成功!'
                    });
                    abc.get(that,potUrl.ritemslist,that.form,function(res){
                        that.total = res.data.length
                        that.tableData =  res.data;
                    });//列表 
                })
            }
            
        },
        changePage(val){
            //翻页
            var that = this;
            that.pageNum = val;
            this.form.page = val;
           abc.getList(that,potUrl.ritemslist,that.form);
        },
        addyes(a){
            //添加时的确定按钮操作；
            let that = this;
            let yesurl = potUrl.questionsedit;
            let op = [];
            let descs = [];
            $.each(that.options,function(i,item){
                var obj = {};
                obj.id = item.id;
                obj.content = item.content;
                op.push(obj);
                descs.push(item.desc)
            })
            that.editForm.options = JSON.stringify(op);
            that.editForm.desc_contents =JSON.stringify(descs) ;
            console.log(that.editForm)
            abc.post(that,yesurl,that.editForm,function(res){
                that.add_edit_show = false;
                that.editForm={
                    stem:'',//基准商品
                    desc_title:'',//性别
                    
                }
                abc.get(that,potUrl.questionslist,that.form,function(res){
                    that.total = res.data.list.length
                    that.tableData =  res.data.list;
                });//列表 
            })
            
        }
    }
}

</script>